<template>
  <div class="brand-con table-gl-w">
    <div class="header">
      <a-input-search @clear="delTag({ label: '品牌名称' })" v-model="name" @search="search" :style="{ width: '320px', borderRadius: '10px' }" placeholder="请输入" allow-clear>
        <template #prepend> 品牌名称 </template>
      </a-input-search>
      <ShowSearchItem :list="SearchResList" @del="delTag" />
    </div>

    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList()">
        <template #headerLeft>
          <a-button type="primary" size="medium" class="btn" @click="show('add')">添加</a-button>
          <a-button size="medium" class="gray-outline" style="margin-left: 10px" @click="changeStaus(true)">启用</a-button>
          <a-button size="medium" class="gray-outline" style="margin-left: 10px" @click="changeStaus(false)">禁用</a-button>
        </template>
        <template #tableBody>
          <a-table class="table-singe-line show-border-table" ref="table" size="mini" :scroll="{ y: '100%' }" :loading="loading" @selection-change="selectColumn" row-key="id" :columns="columns" :data="brandList" :row-selection="rowSelection" :pagination="false">
            <template #columns>
              <a-table-column v-for="(item, index) of columns" :key="index" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                <template v-if="item.title === '状态'" #cell="{ record }">
                  <a-switch v-model="record.status" @change="changeStaus($event, record)" />
                </template>
                <template v-else-if="item.title === '品牌LOGO'" #cell="{ record }">
                  <a-image width="40" :src="record.logoPic" />
                </template>
                <template v-else-if="item.title === '创建时间'" #cell="{ record }">
                  <span>{{ $setTime(record.gmtCreate) }}</span>
                </template>
                <template v-else-if="item.title === '操作'" #cell="{ record }">
                  <a-button type="text" @click="show('edit', record)">编辑</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <Detail ref="modelEl" @save="getList" :detail="detail" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'
  import ShowSearchItem from '@/components/showSearchItem.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Detail from './components/detail.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { getBrandList, updateBrandStatus } from '@/api/product'
  export default defineComponent({
    name: 'BrandIndex',
    components: { ShowSearchItem, Detail, TableWrap },
    setup() {
      let SearchResList = reactive<any>([])
      const loading = ref(false)
      let name = ref('')
      const table = ref()
      let selectRow = reactive([])
      let pageNation = reactive({ total: 30, pageSize: 20, pageNum: 1 })
      const rowSelection = reactive({
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }) as any

      const modelEl = ref()

      const detail = ref({ type: '', data: null })
      const columns: any = [
        {
          title: '品牌编码',
          dataIndex: 'code',
          align: 'left',
          width: 160,
        },
        {
          title: '品牌名称',
          dataIndex: 'name',
          align: 'left',
          width: 150,
        },
        {
          title: '品牌LOGO',
          dataIndex: 'logoPic',
          align: 'left',
          width: 100,
        },
        {
          title: '描述',
          dataIndex: 'description',
          align: 'left',
          width: 150,
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'left',
          width: 150,
        },
        {
          title: '创建人',
          dataIndex: 'createUname',
          align: 'left',
          width: 150,
        },
        {
          title: '创建时间',
          dataIndex: 'gmtCreate',
          align: 'left',
          width: 150,
        },
        {
          title: '操作',
          dataIndex: 'email',
          align: 'left',
          width: 110,
        },
      ]
      let brandList = ref([])

      const search = () => {
        let obj = { label: '品牌名称', value: name.value, sort: 1 }
        let index = SearchResList.findIndex((e: any) => e.label == '品牌名称')
        if (index != -1) {
          SearchResList[index] = obj
        } else {
          name.value ? SearchResList.push(obj) : ''
        }
        getList()
      }
      const delTag = (data: any) => {
        let index = SearchResList.findIndex((e: any) => e.label == data.label)
        name.value = ''
        SearchResList.splice(index, 1)
        getList()
      }

      const show = (type: string, data?: any) => {
        detail.value.type = type
        data ? (detail.value.data = data) : (detail.value.data = null)
        modelEl.value.visible = true
      }

      const changePage = (val: number) => {
        pageNation.pageNum = val
        getList()
      }
      const sizeChange = (val: number) => {
        pageNation.pageNum = 1
        pageNation.pageSize = val
        getList()
      }

      const selectColumn = (val: any) => {
        selectRow = val
      }

      // 获取列表
      const getList = async () => {
        let params = {
          name: name.value,
          pageSize: pageNation.pageSize,
          pageNum: pageNation.pageNum,
        }
        loading.value = true
        const res: any = await getBrandList(params)
        if (res.code == 'SUCCESS') {
          brandList.value = res.data.records
          pageNation.total = res.data.total
        }
        loading.value = false
      }

      // 修改状态
      const changeStaus = async (val: any, data?: any) => {
        let params: any = {
          status: val,
        }
        if (data) {
          params.idList = new Array(data.id)
        } else {
          if (selectRow.length <= 0) {
            return Message.error('请选择数据')
          }
          params.idList = selectRow
        }

        const res: any = await updateBrandStatus(params)
        if ((res.code = 'SUCCESS')) {
          Message.success('修改成功')
        }
        if (!data) {
          getList()
          selectRow.forEach((e) => {
            table.value.select(e, false)
          })
        }
      }

      getList()

      return {
        loading,
        table,
        SearchResList,
        name,
        search,
        delTag,
        show,
        columns,
        brandList,
        rowSelection,
        modelEl,
        detail,
        changePage,
        sizeChange,
        pageNation,
        selectColumn,
        getList,
        changeStaus,
      }
    },
  })
</script>

<style lang="less" scoped>
  .brand-con {
    width: 100%;
    height: calc(100vh - @menuHeight);
    // background-color: white;
    .header {
      width: 100%;
      // border-radius: 10px;
      padding: 5px 10px;
      box-sizing: border-box;
      background: white;
    }
    .table {
      width: 100%;
      // border-radius: 10px;
      background: white;
      margin-top: 10px;
      .top {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
      }
    }
  }
</style>
